<template>
  <div class="demo">
    <div class="demo-title">竖排列表样式</div>
    <div class="demo-content">
      <List item-layout="vertical" size="large" :pagination="pagination" :data-source="listData">
        <template #footer>
          <div><b>sscd</b> footer part</div>
        </template>
        <template #renderItem="{ item }">
          <List.Item key="item.title">
            <template #actions>
              <span><StarOutlined style="margin-right: 8px" />{{ 156 }}</span>
              <span><LikeOutlined style="margin-right: 8px" />{{ 156 }}</span>
              <span><MessageOutlined style="margin-right: 8px" />{{ 2 }}</span>
            </template>
            <template #extra>
              <img width="272" alt="logo" :src="imgSrc" />
            </template>
            <List.Item.Meta :description="item.description">
              <template #title>
                <a :href="item.href">{{ item.title }}</a>
              </template>
              <template #avatar><Avatar :src="item.avatar" /></template>
            </List.Item.Meta>
            {{ item.content }}
          </List.Item>
        </template>
      </List>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { StarOutlined, LikeOutlined, MessageOutlined } from '@ant-design/icons-vue';
  import Avatar from '@sscd/avatar';
  import List from '@sscd/list';
  const imgSrc = 'https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png';
  const listData: Record<string, string>[] = [];
  for (let i = 0; i < 23; i++) {
    listData.push({
      href: 'https://www.antdv.com/',
      title: `sscd part ${i}`,
      avatar: 'https://joeschmoe.io/api/v1/random',
      description:
        'SSC+ Design, a design language for background applications, is refined by SSC+ UED Team',
      content:
        'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
    });
  }
  const pagination = {
    onChange: (page: number) => {
      console.log(page);
    },
    pageSize: 3,
  };
</script>
